<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请退租—租满即送</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <link rel="icon" type="text/css" href="img/favicon.ico">
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/applyService_zu.css">
</head>
<body>
    <!--网页头部-->
    <div id="userheader"></div>
    <!--内容-->
    <div id="content">
        <!--内容导航栏-->
        <nav class="navbar navbar-default">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">家具租赁</a>
                    </li>
                    <li>
                        <a href="#">增值服务</a>
                    </li>
                    <li>
                        <a href="#">最新咨询</a>
                    </li>
                    <li>
                        <a href="#">个人中心</a>
                    </li>
                </ul>
            </div>
        </nav>
        <h3>个人中心</h3>
        <div class="container">
            <div class="row">
                <!--左侧内容-->
                <div class="col-xs-3">
                    <!--左侧面版-->
                    <div class="panel panel-default">
                        <div class="panel-heading panelHeadingBg">
                            <img src="img/bigpic.jpg" class="headPic">
                        </div>
                        <div class="panel-body">
                            <!--2、列表组-->
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <a href="personal_account.html">账户信息</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="personal_order.html">我的订单</a>
                                </li>
                                <li class="list-group-item active">
                                    <a href="personal_furniture.html">在租家具</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="personal_bill.html">我的账单</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="personal_coupon.html">我的优惠券</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="personal_recharge.html">账户充值</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="personal_deposit.html">免押金额度</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="personal_address.html">收货地址</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="personal_invoice.html">发票信息</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="personal_information.html">个人信息</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="#">注销</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--2、右侧主体-->
                <div class="col-xs-9">
                    <!--右侧面版-->
                    <div id="panel" class="panel panel-default rightPanel">
                        <div class="panel-heading">
                            <h4 class="myorder">申请退租</h4>
                        </div>
                        <div class="panel-body">
                            <ul class="product list-inline">
                                <li>商品信息</li>
                                <li>订单金额</li>
                                <li>时长</li>
                                <li>退租数量</li>
                                <li>操作</li>
                            </ul>
                            <p class="productDate">
                                <span>下单日期:</span>
                                <span>2017-9-8</span>&nbsp;&nbsp;
                                <span>订单号:</span>
                                <span>1234567890</span>&nbsp;&nbsp;
                                <span>起租日期:</span>
                                <span>2017-9-7</span>
                                <a class="rt" href="#">订单详情</a>
                            </p>
                            <!--列表组-->
                            <ul class="orders list-inline">
                                <li class="imgInfo">
                                    <div class="media">
                                        <div class="media-left">
                                            <img src="img/example.jpg">
                                        </div>
                                        <div class="media-body">
                                            <p>欧尚办公组合家具</p>
                                            <p>
                                                <img src="img/color.jpg">
                                            </p>
                                            <p>
                                                ¥<span>255</span>/月
                                            </p>
                                        </div>
                                    </div>
                                </li>
                                <li>¥4440</li>
                                <li>
                                    <span>12</span>个月
                                </li>
                                <li class="number">
                                    <b class="glyphicon glyphicon-minus-sign"></b>
                                    <span>1</span>
                                    <b class="glyphicon glyphicon-plus-sign"></b>
                                </li>
                                <li>
                                    <span>&times;</span>
                                </li>
                            </ul>
                            <div class="rent">
                                <p>退租类型（租满即送）</p>
                                <p>租满即送产品违约，已支付租期<span>2</span>月，未支付租期<span>3</span>，需支付违约金<span>4</span>元</p>
                            </div>
                            <p class="productDate border">
                                未还款账单
                            </p>
                            <ul class="list-inline noHead">
                                <li>还款期</li>
                                <li>时间</li>
                                <li>当前租金</li>
                            </ul>
                            <ul class="list-inline noBody">
                                <li>2018-9-8</li>
                                <li><span>12</span>个月</li>
                                <li class="red">¥<span>2222</span></li>
                            </ul>
                            <p class="productDate border">
                                退租说明
                            </p>
                            <div class="introduce">
                                <p>对于"随租随还"的产品：</p>
                                <p>若您有退租需求可随时退租，但需缴纳退租产品的所有使用租金，芈租界会将产品押金退还至您的平台账户，可随时申请提现。</p>
                                <br>
                                <p>对于"租满即送"的产品：</p>
                                <p>若您有退租需求可进行申请，但视为违约行为，需向芈租界缴纳剩余未缴纳但租金5%作为违约金。</p>
                            </div>
                            <!--标签-->
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#t1" data-toggle="tab">
                                        直接支付
                                    </a>
                                </li>
                                <li>
                                    <a href="#t2" data-toggle="tab">
                                        转随租随还
                                    </a>
                                </li>
                            </ul>
                            <!--创建内容组-->
                            <div class="tab-content">
                                <!--直接支付-->
                                <div class="tab-pane active" id="t1">
                                    <ul class="list-inline">
                                        <li value="1" class="active">
                                            <img src="img/wx.png">
                                            <b></b>
                                        </li>
                                        <li value="2">
                                            <img src="img/zfb.png">
                                            <b></b>
                                        </li>
                                        <li value="3">
                                            <img src="img/yl.png">
                                            <b></b>
                                        </li>
                                        <li value="4">
                                            <img src="img/ye2.png">
                                            <b></b>
                                        </li>
                                    </ul>
                                    <p class="accout">
                                        <span>欠费账单：</span>
                                        <span class="money">¥</span>
                                        <span class="money">4214</span>
                                    </p>
                                    <p class="accout">
                                        <span>违约金：</span>
                                        <span class="money">¥</span>
                                        <span class="money">4214</span>
                                    </p>
                                    <p class="accout">
                                        <span>需支付金额：</span>
                                        <span class="money">¥</span>
                                        <span class="money">4214</span>
                                    </p>
                                </div>
                                <!--转随租随还-->
                                <div class="tab-pane" id="t2">
                                    <ul class="list-inline">
                                        <li value="5" class="active">
                                            <img src="img/wx.png">
                                            <b></b>
                                        </li>
                                        <li value="6">
                                            <img src="img/zfb.png">
                                            <b></b>
                                        </li>
                                        <li value="7">
                                            <img src="img/yl.png">
                                            <b></b>
                                        </li>
                                        <li value="8">
                                            <img src="img/ye2.png">
                                            <b></b>
                                        </li>
                                    </ul>
                                    <p class="accout">
                                        <span>欠费账单：</span>
                                        <span class="money">¥</span>
                                        <span class="money">4214</span>
                                    </p>
                                    <p class="accout">
                                        <span>押金：</span>
                                        <span class="money">¥</span>
                                        <span class="money">4214</span>
                                    </p>
                                    <p class="accout">
                                        <span>需支付金额：</span>
                                        <span class="money">¥</span>
                                        <span class="money">4214</span>
                                    </p>
                                </div>
                            </div>
                            <div class="btnName">
                                <a class="btn btn-danger">确认退租</a>
                                <a class="btn btn-warning">联系客服</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--隔断底部-->
    <div id="partition"></div>
    <div id="footer"></div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootlint.js"></script>
    <script src="js/common.js"></script>
    <script src="js/applyServie_zu.js"></script>
    <!--<script>-->
    <!--bootlint.showLintReportForCurrentDocument([]);-->
    <!--</script>-->
</body>
</html>